import React,{useEffect,useState} from 'react'
import { Tabs,ProductCard } from 'react-vant'
import * as api from "../../api/index"
// import {getlist} from "../../api/index"
import {useDispatch,useSelector} from "react-redux"
import {Anyaction} from "../../untils/index"
type Props = {
  [x: string]: any;
}

const Home = (props: Props) => {
  const dispatch:Anyaction=useDispatch()
  const data=useSelector((state:Anyaction)=>{
  return state.reducer.data
  })
  const childrenData=useSelector((state:Anyaction)=>{
    return state.reducer.childrenData
    })
  // console.log(data,childrenData);
  useEffect(()=>{
  dispatch(api.getlist())
  },[dispatch])
  const tab=(index:number)=>{
  console.log(index);
  dispatch(api.check_active(index))
  }
  return (
    <div>
        <Tabs onClickTab={(e)=>tab(e.index)}>
        {data.map((item:Anyaction,index:number) => (
          <Tabs.TabPane key={index} title={item.title}>
           {
            childrenData&&childrenData.map((item:Anyaction,index:number)=>{
             return <ProductCard
             key={index}
             num={item.num}
             price={item.price}
             desc={item.info}
             title={item.title}
             thumb={item.img}
           />
            })
               
           }
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}

export default Home